<template>
    <div class="footer">
        <cube-tab-bar
                v-model="selectedLabelDefault"
                :data="tabs"
                @click="clickHandler"
                @change="changeHandler">
        </cube-tab-bar>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedLabelDefault: 'Vip',
                tabs: [{
                    label: '首页',
                    icon: 'cubeic-home'
                }, {
                    label: '推荐',
                    icon: 'cubeic-like'
                }, {
                    label: '榜单',
                    icon: 'cubeic-vip'
                }, {
                    label: '我的',
                    icon: 'cubeic-person'
                }]
            }
        },
        methods: {
            clickHandler(label) {
                // if you clicked home tab, then print 'Home'
                switch (label) {
                    case '首页':
                        this.$router.push({
                            path: '/home'
                        })
                        return
                    case '推荐':
                        this.$router.push({
                            path:'/list'
                        })
                        return
                    case '榜单':
                        this.$router.push({
                            path:'/top'
                        })
                        return
                    case '我的':
                        this.$router.push({
                            path:'/mine'
                        })

                }
            },
            changeHandler(label) {
                // if you clicked different tab, this methods can be emitted
            }
        }
    }
</script>

<style type="text/stylus" lang="stylus">
    .footer
        z-index 101
        background-color #FFFFFF
        height 45px
        position fixed
        bottom 0
        left 0
        right 0

        .cube-tab-bar
            height 100%
            font-size 18px
            border-top: solid 1px #D8D8D8

            .cube-tab
                div
                    margin-top 2px
                    font-size 12px
                    color #A7A7A7

</style>
